<template>
  <div class="productList">
    <text class="ListTitle">{{ props.listTitle }}</text>
    <el-divider />
    <div v-infinite-scroll="load"
         class="content"
    >
      <div class="product" style="overflow: auto" v-for="item in data" :key="item.id" @click="openInfo(item)">
        <img class="itemImg" :src="item.pic" alt="loading">
        <text class="itemTitle">{{ item.name }}</text>
        <text class="itemPrice">￥ {{ item.price }}</text>
      </div>
      <div :class="{'item_info_empty': true}">
        <el-empty v-if="showBottomOrNot()" description="已经到底了~" />
      </div>
    </div>
  </div>
  <productInfo :itemData="itemData" v-if="judge" v-model:judge="judge" />
</template>

<script setup>
import {ref, defineProps, onMounted, computed} from 'vue'
import productInfo from "@/components/product/productInfo.vue";
import {listProductSearch} from "@/apis/product.js";

const data = ref([])
const itemData = ref()
const props = defineProps({
  listTitle: String,
  getData: {
    type: Function,
    default: listProductSearch
  },
  bottomEsOrNot: {
    type: Boolean,
    default: true
  },
  param: {
    type: Object,
    default: {}
  }
})
const pageNum = ref(0)
const pageSize = ref(16)
const totalNum = ref(0)
const judge = ref(false)
const showEmpty = ref(false)
const loadingOrNot = ref(false)

const openInfo = (item) => {
  itemData.value = item
  judge.value = true
}

const load = async () => {
  if (totalNum.value <= (pageNum.value * pageSize.value) && totalNum.value !== 0) {
    showEmpty.value = true
  } else if (totalNum.value > (pageNum.value * pageSize.value)) {
    showEmpty.value = false
  }
  if (!showEmpty.value && !loadingOrNot.value) {
    pageNum.value++
    loadingOrNot.value = true
    let query = { ...{
        pageNum: pageNum.value,
        pageSize: pageSize.value
      }, ...props.param };
    await props.getData(query).then(res => {
      data.value.push(...res.rows)
      totalNum.value = res.total
      loadingOrNot.value = false
    })
  }
}

const showBottomOrNot = () => {
  return showEmpty.value && props.bottomEsOrNot
};

onMounted(() => {
  load()
})
</script>

<style scoped>
.ListTitle {
  height: 5vh;
  padding-left: 2.75vh;
  width: 100%;
  display: flex;
  align-items: flex-end;
  font-size: 28px;
  font-weight: bold;
}
.productList {
  height: auto;
}
.content {
  height: auto;
  width: 160vh;
  display: flex;
  flex-wrap: wrap;
}
.item_info_empty {
  min-height: 5vh;
  width: 160vh;
  overflow: hidden;
}
.product {
  height: 30vh;
  width: 38vh;
  margin: 1vh;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.12);
  border: 1px solid #a0cfff;
  transition: all 0.4s ease-in-out;
  cursor: pointer;
}
.product:hover {
  transform: scale(1.05);
  box-shadow: 0 16px 48px 16px rgba(0, 0, 0, .08), 0 12px 32px rgba(0, 0, 0, .12), 0 8px 16px -8px rgba(0, 0, 0, .16)
}
.itemTitle {
  height: 5vh;
  width: 32vh;
  display: flex;
  align-items: center;
  font-size: 22px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.itemPrice {
  height: 4vh;
  width: 32vh;
  display: flex;
  align-items: center;
  font-size: 20px;
  font-weight: 600;
  color: #F56C6C;
}
.itemImg {
  height: 18vh;
  width: 32vh;
  object-fit: cover;
  display: flex;
  align-items: center;
  justify-content: center;
}

</style>
